<template>
  <div id="glysybz">
    <div id="echartsGlysybz"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      echartsGlysybz: null,
      option: {
        grid: {
          top: '95',
          left: '5%',
          right: '5%',
          bottom: '15',
          containLabel: true
        },
        title: {
          text: '各领域事业编制配置比对',
          top: '10',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: 'cross',
          //   crossStyle: {
          //     color: '#999'
          //   }
          // }
        },
        legend: {
          selectedMode: 'single',
          top: '40',
          left: 'center',
          textStyle: {
            fontSize: 14,//字体大小
            color: '#ffffff'
          },
          data: ['教育', '科研', '文化', '卫生', '农林牧水', '交通', '其他']
          // selected: {
          //   '教育': true,
          //   '科研': false,
          //   '文化': false,
          //   '卫生': false,
          //   '农林牧水': false,
          //   '交通': false,
          //   '其他': false
          // }
        },
        xAxis: [
          {
            type: 'category',
            axisPointer: {
              type: 'shadow'
            },
            axisTick: { show: false },
            axisLabel: {
              show: true,
              rotate: 30,
              textStyle: {
                fontSize: 13,//字体大小
                color: '#f0f0f0'
              }
            },
            data: ['自治区直属', '南宁市', '柳州市', '桂林市', '崇左市', '钦州市', '玉林市', '百色市', '防城港市', '贺州市', '贵港市', '河池市', '来宾市', '梧州市', '北海市']
          }
        ],
        yAxis: [
          {
            type: 'value',
            show: false,
            name: '编制数',
            nameTextStyle: {
              fontSize: 14,//字体大小
              color: '#ffffff'
            },
            splitLine: { show: false },
            axisLabel: { show: false }
          }
        ],
        series: [
          {
            name: '教育',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [95206, 67744, 73248, 86143, 55634, 82788, 98661, 64204, 61506, 56942, 64733, 52422, 65022, 59209, 101791],
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#FA5A53'
                }, {
                    offset: 1,
                    color: '#E29052'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          },
          {
            name: '科研',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [45801, 65665, 50221, 73121, 67232, 44536, 64020, 73837, 53830, 52383, 46175, 62848, 55679, 76382, 53047],
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#E29052'
                }, {
                    offset: 1,
                    color: '#FA5A53'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          },
          {
            name: '文化',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [56966, 70780, 66352, 68535, 64407, 60655, 45676, 67175, 61339, 79175, 49831, 70857, 43415, 76151, 61919],
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#E29052'
                }, {
                    offset: 1,
                    color: '#FA5A53'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          },
          {
            name: '卫生',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [68661, 73319, 78018, 57383, 42014, 68840, 53647, 56964, 74506, 62453, 72632, 63054, 48755, 62491, 76361],
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#E29052'
                }, {
                    offset: 1,
                    color: '#FA5A53'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          },
          {
            name: '农林牧水',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [36741, 39661, 38356, 42699, 32559, 55210, 43032, 53508, 58555, 39016, 57372, 33774, 53791, 48409, 54364],
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#E29052'
                }, {
                    offset: 1,
                    color: '#FA5A53'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          },
          {
            name: '交通',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [49797, 44777, 35836, 47049, 36582, 56752, 54535, 47525, 53934, 40247, 32089, 49562, 32629, 42660, 34539],
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#E29052'
                }, {
                    offset: 1,
                    color: '#FA5A53'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          },
          {
            name: '其他',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [52692, 59130, 52546, 63439, 59274, 64351, 66450, 56854, 67829, 69475, 62442, 58155, 63768, 63662, 57882],
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#E29052'
                }, {
                    offset: 1,
                    color: '#FA5A53'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initEchartsGlysybz()
  },
  methods: {
    initEchartsGlysybz() {
      this.echartsGlysybz = this.$echarts.init(document.getElementById('echartsGlysybz'));
      this.echartsGlysybz.setOption(this.option);
      window.addEventListener('resize', () => this.echartsGlysybz.resize(), false )
    }
  }
}
</script>

<style lang="scss">
#glysybz {
  width: calc(50% - 15px);
  height: 100%;
  margin-right: 15px;
  background-color: rgba(1, 35, 102, 0.8);
  //background-color: #012366;
  border-radius: 20px;
}
#echartsGlysybz {
  width: 100%;
  height: 100%;
}
</style>
